/** * Created by wust on 2020-04-02 10:43:54. */
<template>
  <el-form ref="formModel" :model="formModel" :rules="rules" label-width="120px" style="width:70%;" @submit.native.prevent>
    <el-form-item label="工单名称" prop="workOrderName"><el-input v-model="formModel.workOrderName"></el-input></el-form-item>
    <el-form-item label="工单类型" prop="workOrderTypeId">
      <el-cascader v-model="workOrderTypeCascaderValue" :options="workOrderTypeCascaderOptions" @change="workOrderTypeCascaderHandleChange"></el-cascader>
    </el-form-item>
    <el-form-item label="申请人" prop="applicant">
      <el-cascader v-model="customerCascaderValue" :options="customerCascaderOptions" @change="customerCascaderHandleChange"></el-cascader>
    </el-form-item>
    <el-form-item label="负责人" prop="director">
      <el-cascader v-model="directorCascaderValue" :options="directorCascaderOptions" @change="directorCascaderHandleChange"></el-cascader>
    </el-form-item>
    <el-form-item label="紧急程度" prop="director">
      <select class="form-control" v-data-dictionary-directive:C1037  v-model="formModel.priorityLevel">
      </select>
    </el-form-item>
    <el-form-item label="任务描述" prop="description">
      <el-input
        type="textarea"
        :rows="6"
        placeholder="请输入内容"
        maxlength="255"
        show-word-limit
        v-model="formModel.description">
      </el-input>
    </el-input></el-form-item>
    <el-form-item style="text-align: left;"><el-button type="primary" @click="onSubmit('formModel')" :loading="submitting">提交</el-button></el-form-item>
  </el-form>
</template>
<script>
import Vue from 'vue';

export default {
  name: 'work-order-create',
  data() {
    return {
      submitting: false,
      formModel: {
        workOrderNumber: null,
        workOrderName: null,
        workOrderTypeId: null,
        applicant: null,
        director: null,
        priorityLevel: '',
        description: null
      },
      rules: {
        workOrderName: [{required: true, message: '工单名称', trigger: 'blur'}],
        workOrderTypeId: [{required: true, message: '请选择工单类型', trigger: 'blur'}],
        applicant: [{required: true, message: '请选择申请人', trigger: 'blur'}],
        director: [{required: true, message: '请选择负责人', trigger: 'blur'}],
        priorityLevel: [{required: true, message: '请选择紧急程度', trigger: 'blur'}]
      },
      workOrderTypeCascaderOptions: [],
      workOrderTypeCascaderValue: [],
      customerCascaderOptions: [],
      customerCascaderValue: [],
      directorCascaderOptions: [],
      directorCascaderValue: []
    };
  },
  created: function () {
    this.initWorkOrderTypeCascaderOption()
    this.initCustomerCascaderOption()
  },
  methods: {
    workOrderTypeCascaderHandleChange: function (val) {
      this.formModel.workOrderTypeId = val[val.length - 1]
      this.initDirectorCascaderOption()
    },
    initWorkOrderTypeCascaderOption: function () {
      Vue.$ajax({
        method: 'post',
        url: Vue.$workOrderServerURL + '/web/WorkOrderTypeController/buildCascader'
      }).then(res => {
        if (res.data.flag !== 'SUCCESS') {
          if (!Vue.$isNullOrIsBlankOrIsUndefined(res.data.message)) {
            this.$message({
              message: res.data.message,
              type: 'warning'
            })
          }
        } else {
          this.workOrderTypeCascaderOptions = res.data.obj
        }
      })
    },
    customerCascaderHandleChange: function (val) {
       this.formModel.applicant = val[val.length - 1]
    },
    initCustomerCascaderOption: function () {
      Vue.$ajax({
        method: 'post',
        url: Vue.$adminServerURL + '/web/CustomerController/buildCascader'
      }).then(res => {
        if (res.data.flag !== 'SUCCESS') {
          if (!Vue.$isNullOrIsBlankOrIsUndefined(res.data.message)) {
            this.$message({
              message: res.data.message,
              type: 'warning'
            })
          }
        } else {
          this.customerCascaderOptions = res.data.obj
        }
      })
    },
    directorCascaderHandleChange: function (val) {
       this.formModel.director = val[val.length - 1]
    },
    initDirectorCascaderOption: function () {
      Vue.$ajax({
        method: 'post',
        url: Vue.$workOrderServerURL + '/web/WorkOrderUserController/buildCascaderByWorkType?workType=' + this.formModel.workOrderTypeId
      }).then(res => {
        if (res.data.flag !== 'SUCCESS') {
          if (!Vue.$isNullOrIsBlankOrIsUndefined(res.data.message)) {
            this.$message({
              message: res.data.message,
              type: 'warning'
            })
          }
        } else {
          this.directorCascaderOptions = res.data.obj
        }
      })
    },
    onSubmit: function(formData) {
      this.$refs[formData].validate(valid => {
        if (!valid) {
        } else {
          this.submitting = true;
          Vue.$ajax({
            method: 'post',
            url: Vue.$workOrderServerURL + '/web/WorkOrderController',
            data: this.formModel
          }).then(res => {
            this.submitting = false;
            if (res.data.flag !== 'SUCCESS') {
              if (!Vue.$isNullOrIsBlankOrIsUndefined(res.data.message)) {
                this.$message({
                  message: res.data.message,
                  type: 'warning'
                });
              }
            } else {
              this.$message({
                message: res.data.message,
                type: 'success'
              });
              this.resetForm('formModel');
            }
          });
        }
      });
    },
    resetForm(formData) {
      this.$refs[formData].resetFields()
      this.workOrderTypeCascaderValue = []
      this.customerCascaderValue = []
      this.directorCascaderValue = []
    }
  }
};
</script>
